<template>
	<view class="taskDetail">
		<view class="flex f_align f_align_center fb_user_info" >
			<view class="flex">
				<view class="fb_user_head">
					<image class="autoImg" :src="jobInfos.userHeadUrl" mode=""></image>
				</view>
				<view class="flex f_column f_align">
					<view class="bold">{{jobInfos.userName}}</view>
					<view class="fb_time">{{jobInfos.createTime}}</view>
				</view>
			</view>
		</view>

		<view class="step_main f f_column">
			<view class="s_f_top bold">步骤预览</view>
			<template v-for="(item,index) in jobInfos.stepList">
				<view class="f s_t_line" :key="index">
					<view class="s_t_r bold f_shrink0">{{index+1}}</view>
					<view class="">
						{{item.desc}}
					</view>
				</view>
				<view class="image_warps f">
					<image class="task_image" @click="$wathcImg([item.imgUrl])" :src="item.imgUrl" mode="widthFix"></image>
					<view v-if="stepImgList[index] && stepImgList[index] != '-1'" class="task_image" @click="$wathcImg([stepImgList[index]])">
						<image class="autoImg" :src="stepImgList[index]" mode="widthFix"></image>
					</view>
				</view>
			</template>
			<view class="f s_t_line">
				<view class="s_t_r bold f_shrink0">{{jobInfos.stepList.length+1}}</view>
				<view class="">请输入微信昵称</view>
			</view>
			<view class="image_warps f">
				<input disabled="true" class="wx_input" v-model="jobInfos.receiveEntity.wechatName" placeholder-class="placeStyle" type="text" placeholder="请输入微信昵称" />
			</view>
		</view>

		<view class="warp_btn f f_align f_align_center" v-if="jobInfos.receiveEntity && jobInfos.receiveEntity != null && jobInfos.receiveEntity.auditStatusType == '10010002'">
			<view class="biding_btn bold reject" @click="toCallback()">审核驳回</view>
			<view class="biding_btn bold" @click="examineOk()">审核通过</view>
		</view>


		<!-- 驳回哦 -->
		<toast :visible.sync="visibleToast" :showClose="false">
			<template slot="content">
				<view class="toast_warp">
					<view class="f f_align f_align_center title">
						<view class=""></view>
						<text class="bold">驳回申请</text>
						<i class="iconfont iconlianhe49" @click="visibleToast = false"></i>
					</view>
					<textarea :auto-focus="true" class="areaStyle" v-model="rejectReason" value="" maxlength="100" placeholder="请输入驳回原因" />
					<view class="biding_btn bold" @click="handlerExamine('10010005')">确定驳回</view>
				</view>
			</template>
		</toast>
	</view>
</template>

<script>
	import $uplaod from '@/utils/upload.js'
	export default {
		data() {
			return {
				jobId:'',
				jobInfos:{
					residueNumber:0,
					number:0,
					isConcern:'1',
					isReceive:'1',
					stepList:[],
					userHeadUrl:'',
					receiveEntity:{
						wechatName:''
					}
				},
				stepImgList:[],
				visibleToast:false,
				rejectReason:'',
			};
		},
		onLoad(option) {
			if(option){
				this.jobId = option.jobId;
			}
		},
		onShow() {
			this.getJobDetail();
		},
		methods:{
			async getJobDetail(){
				const _this = this;
				let res = (await _this.$http('/api/auth/job/getReceiveEntity','POST',this.jobId)).data;
				if(res && res.code == '0'){
					let datas =  res.data;
					_this.jobInfos = datas.jobEntity;
					_this.stepImgList = datas.stepImgList;
					console.log(datas);
				}
			},
			toCallback(){
				const _this = this;
				_this.visibleToast = true;
			},
			examineOk(item){
				const _this = this;
				uni.showActionSheet({
					itemList:['确定要通过当前任务嘛？'],
					success() {
						_this.handlerExamine('10010004');
					}
				})
			},
			//通过驳回操作
			async handlerExamine(type){
				const _this = this;
				let res = (await _this.$http('/api/auth/job/auditReceiveJob','post',{
					auditStatusType:type,
					rejectReason:type == '10010004' ? '' : _this.rejectReason,
					id:_this.jobId
				})).data;
				_this.$showToast(res.msg);
				if(res && res.code == '0'){
					_this.visibleToast = false;
					_this.getJobDetail();
					_this.rejectReason = '';
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.toast_warp{
		box-sizing: border-box;
		width: 100%;
		position: absolute;
		bottom: 0;left: 0;right: 0;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 24rpx;
		.title{
			padding-bottom: 24rpx;
			font-size: 32rpx;
			.iconfont{
				transform: rotateZ(45deg);
			}
		}
		.areaStyle{
			box-sizing: border-box;
			width: 100%;
			width: 100%;
			height: 200rpx;
			border: solid 1rpx #3F536E;
			border-radius: 8rpx;
			padding: 10rpx;
		}
	}
	.taskDetail{
		width: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
		padding-bottom: 100rpx;

		.warp_btn{
			.biding_btn{
				width: 320rpx;
				&.reject{
					color: $ych_color;
					background-color: #fff;
					border: solid 4rpx $ych_color;
				}
			}
		}
		.s_t_line{
			font-size: 28rpx;
			color: #343432;
			margin-top: 24rpx;
			.s_t_r{
				@include flex_center;
				width: 40rpx;height: 40rpx;
				border-radius: 50%;
				background-color:$ych_color;
				margin-right: 8rpx;
				color: #fff;
			}
			.s_tips{
				color: #999;
				font-size: 24rpx;
				margin-top: 8rpx;
			}
		}
		.toast_show{
			box-sizing: border-box;
			width: 560rpx;
			height: 794rpx;
			padding: 40rpx 24rpx;
			background:#fff url('/static/image/toastBg@2x.png') no-repeat center;
			background-size: 100% 100%;
			border-radius: 25rpx;
			.t_tt{
				font-size: 40rpx;
				color: #fff;
				margin-left: 20rpx;
			}
			.t_tt2{
				font-size: 32rpx;
				color: #fff;
				margin: 30rpx 0 60rpx 20rpx;
			}
			.toast_btn{
				width: 256rpx;
				background-color: $ych_color;
				font-size: 28rpx;
				color: #fff;
				padding: 13rpx 0;
				border-right: 8rpx;
				margin: 60rpx auto 0;
				@include flex_center;
				border-radius: 8rpx;
			}
		}
		.step_main{
			background-color: #fff;
			padding: 24rpx 24rpx 35rpx;
			.s_f_top{
				font-size: 32rpx;
				color: $ych_color;
			}
			.image_warps{
				padding-left: 48rpx;
				margin-top: 16rpx;
				.wx_input{
					box-sizing: border-box;
					width: 654rpx;height: 80rpx;
					padding-left: 24rpx;
					border: solid 1rpx #707070;
					color: #343432;
					border-radius: 8rpx;
				}
				.task_image{
					width: 320rpx;
					margin-right: 32rpx;
					position: relative;
					.icon_i{
						width: 42rpx;height: 42rpx;
						background-color: rgba($color: #000000, $alpha: 0.5);
						position: absolute;
						top:0;right: 0;
						color: #fff;
						.iconfont{
							transform: rotateZ(45deg);
						}
					}
				}
				.uploadImage{
					width: 160rpx;height: 160rpx;
					background-color: #F4F5F7;
					border-radius: 12rpx;
					font-size: 24rpx;
					color: #666666;
					.iconjianqu10{
						font-size: 52rpx;
						color: $ych_color;
						margin-bottom: 20rpx;
					}
				}
			}
		}
		.x_tips{
			padding: 24rpx;
			font-size: 24rpx;
			color: #999;
		}
		.biding_btn{
			width: 606rpx;
			height: 88rpx;
			background-color: $ych_color;
			border-radius: 12rpx;
			font-size: 30rpx;
			color: #fff;
			@include flex_center;
			margin:80rpx auto;
			@include box_shadow_btn;
			&.disabled{
				background-color: #B8B8B8;
				box-shadow: 0 8rpx 24rpx #B8B8B8;
			}
		}
		.f_bm_tj{
			padding: 24rpx 24rpx 70rpx;
			color: #999;
			font-size: 24rpx;
			background-color: #fff;
			border-bottom: solid 1rpx #F6F6F6;
			.bold{
				font-size: 32rpx;
				color: $ych_color;
				margin-bottom: 12rpx;
			}
		}
		.safe_bar{
			width: 100%;
			box-sizing: border-box;
			padding: 22rpx 24rpx;
			background-color:#F1F4F9;
			color: #30CF8D;
			font-size: 24rpx;
			.safa_ico{
				width: 34rpx;height: 34rpx;
				margin-right: 8rpx;
			}
		}
		.f_top{
			padding: 21rpx 24rpx;
			font-size: 30rpx;
			color: #E6212A;
			.bold{
				color: #1A1A1A;
				font-size: 36rpx;
			}
			border-bottom: solid 1rpx $ych_br_color;
		}
		.f_botm{
			padding: 16rpx 24rpx;
			font-size: 24rpx;
			color: #999;
			border-bottom: solid 12rpx #F6F6F6;
		}
		.fb_user_info{
			padding: 32rpx 24rpx;
			background-color: #fff;
			border-bottom: solid 1rpx $ych_br_color;
			.fb_user_head{
				width: 72rpx;height: 72rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				image{border-radius: 50%;}
			}
			.fb_time{font-size: 22rpx;}
			.gz_pro_btn{
				color: #fff;
				@include flex_center;
				background-color: $ych_color;
				padding: 8rpx 20rpx;
				border-radius: 8rpx;
			}
		}
	}
</style>
